<!-- {% load crispy_forms_tags %} -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
	</head>

	<body>
		<div class="container mt-5 w-50">
			<form id="signupForm" method="POST">
				{% csrf_token %} {{ form|crispy }}
				<input type="submit" name="signupSubmit" class="btn btn-success btn-lg" />
			</form>
		</div>

		{% block javascript %}
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

		<script>
			$(document).ready(function () {
				// catch the form's submit event
				$('#id_username').keyup(function () {
					// create an AJAX call
					$.ajax({
						data: $(this).serialize(), // get the form data
						url: "{% url 'validate_username' %}",
						// on success
						success: function (response) {
							if (response.is_taken == true) {
								$('#id_username').removeClass('is-valid').addClass('is-invalid');
								$('#id_username').after('<div class="invalid-feedback d-block" id="usernameError">This username is not available!</div>');
							} else {
								$('#id_username').removeClass('is-invalid').addClass('is-valid');
								$('#usernameError').remove();
							}
						},
						// on error
						error: function (response) {
							// alert the error if any error occured
							console.log(response.responseJSON.errors);
						},
					});

					return false;
				});
			});
		</script>
		{% endblock javascript %}
	</body>
</html>
